import React, { useEffect } from 'react'
import { useState } from 'react'
import moment from 'moment';

export default function EffectClock() {
  //声明状态
  let [time, setTime] = useState('');

  //模拟组件挂载完成
  useEffect(() => {
    let timer = setInterval(() => {
      //更新状态
      setTime(moment().format('YYYY-MM-DD HH:mm:ss'))
    }, 1000);
    
    //模拟组件卸载之前回调
    return () => {
      clearInterval(timer);
    }
  }, [])

  return (
    <div style={{display: 'inline-block', padding: '20px 30px', border: 'solid 1px #666'}}>
      {time}
    </div>
  )
}
